<template>
<div class="mainBody">
  <!-- vue3页面 -->
   <div class="container">
    <div class="drop">
      <div class="content">
        <h2>Sign In</h2>
        <form>
          <div class="inputBox">
            <input type="text" placeholder="账号" autocomplete="off" v-model="loginfrom.username">
          </div>
          <div class="inputBox">
            <input type="password" placeholder="密码" autocomplete="off" v-model="loginfrom.password">
          </div>
          <div class="inputBox">
            <input value="Login" @click="login()">
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { encrypt, decrypt } from '@/utils/crypto.ts'
import { message } from 'ant-design-vue'
import axios from 'axios'
import store from '@/store'
import router from '@/router'

interface loginFrom {
        username: string;
        password: string;
}
export default defineComponent({
  name: 'App',
  setup () {
    const loginfrom = reactive<loginFrom>({
      username: '',
      password: ''
    })

    const login = () => {
      if (loginfrom.username === '' || loginfrom.password === '') {
        message.error('账号密码不能为空')
      } else {
        const encryptedUsername = encrypt(loginfrom.username)
        const encryptedPassword = encrypt(loginfrom.password)
        const loginData = {
          encryptedUsername,
          encryptedPassword
        }
        axios.post('/login', loginData).then((res) => {
          if (res.data.status === 200) {
            message.success('登录成功')
            store.commit('setUserRouter', res.data.meta.user.roles)
            window.localStorage.setItem('token', res.data.meta.user.token)
            router.push('/nav')
          } else {
            message.error(res.data.meta.msg)
          }
        })
      }
    }

    return {
      loginfrom,
      login
    }
  }
})
</script>

<style scoped lang='less'>
// @import './google-front.css';

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
.mainBody{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #eff0f4;
}

.container{
  position: relative;
  justify-content: center;
  align-items: center;
  left: -80px;
}

.container .drop{
  position: relative;
  width: 350px;
  height: 350px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, .05),
              25px 35px 20px rgba(0, 0, 0, .05),
              25px 30px 30px rgba(0, 0, 0, .05),
              inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition: 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
 border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
}

.container .drop:hover{
  border-radius: 50%;
}

.container .drop::before{
  content: '';
  position: absolute;
  top:50px;
  left: 85px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.9;
}
.container .drop::after{
  content: '';
  position: absolute;
  top:90px;
  left: 110px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.9;
}

.container .drop .content{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  gap: 15px;
}

.container .drop .content h2{
  position: relative;
  color: #333;
  font-size: 1.5em;
}
.container .drop .content form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.container .drop .content form .inputBox{
  position: relative;
  width: 225px;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, .1),
  inset -2px -5px 10px rgba(255, 255, 255, 1),
  15px 15px 10px rgba(0, 0, 0, .05),
  15px 10px 15px rgba(0, 0, 0, .05);
  border-radius: 25px;
}

.container .drop .content form .inputBox::before{
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

.container .drop .content form .inputBox input{
  border: none;
  outline: none;
  background-color: transparent;
  width: 100%;
  font-size: 1em;
  padding: 10px 15px;
}
.container .drop .content form .inputBox input[type="submit"] {
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-weight: 500;

}
.container .drop .content form .inputBox:last-child {
  width: 120px;
  background-color: #ff0f5b;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, .1),
  15px 15px 10px rgba(0, 0, 0, .05),
  15px 10px 15px rgba(0, 0, 0, .05);
  transition: 0.5s;
}
.container .drop .content form .inputBox:last-child:hover{
  width: 150px;
}
</style>
